<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function red() {
            console.log('red');
        }
        function green() {
            console.log('green');
        }
        function yellow() {
            console.log('yellow');
        }

        function task(timer,light,callback){
            setTimeout(()=>{
                if(light === 'red'){
                    red()
                }
                if(light === 'green'){
                    green()
                }
                if(light === 'yellow'){
                    yellow()
                }
                callback()
            },timer)
        }

        const step = () =>{
            task(3000,'red',()=>{
                task(2000,'green',()=>{
                    task(1000,'yellow',step)
                })
            })
        }
        step()
    </script>
</body>

</html>